<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 100px;
            height: 200vh;
            background-color: grey;
        }
    </style>
</head>
<body>
    
    <div class="container"><button class="button">按钮</button></div>

    <script>
        /**
         * @fun {function} 要执行的函数 
         * @time {time} 节流时间间隔
         */
        function debounce(fun,delay) { 
            let timerId = null;

            return function() {
                if(timerId) {
                   
                    clearTimeout(timerId);
                }
                timerId = setTimeout(function(){
                    fun.apply(this,Array.from(arguments).slice(2));
                    
                },delay)
            }
            
        }

        function throttle(fun,time) {
            let flag = false;
            return function() {
                if(flag) {
                    return ;
                }
                flag = true;
                fun.apply(this,arguments);
                setTimeout(() => {
                    flag = false;
                },time)
            }
        }

        function addItem() {
            console.log('----func');
        }

        let debounceAddItem = throttle(addItem,2000);
        let dbScroll = debounce(() => console.log('888999'),50);

        document.querySelector('.button').addEventListener('click',() => debounceAddItem());

        window.addEventListener('scroll',() => dbScroll())



    </script>
</body>
</html>